<template>
	<view class="container">
		<!-- 顶部图像 -->
		<image src="/static/image/bg/bg1.jpg" mode="aspectFill" class="header-image"></image>

		<!-- 分段器tab -->
		<view class="tab">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:inActiveColor="inActiveColor" :active-color="activeColor" @clickItem="onClickItem" />
		</view>

		<view class="content">
			<!-- 登录面板 -->
			<view v-if="current === 0">
				<view>
					<uni-forms ref="baseForm" :modelValue="loginData">
						<uni-forms-item label="账号" required name="username">
							<uni-easyinput placeholder="请输入账号" v-model="loginData.username" />
						</uni-forms-item>
						<uni-forms-item label="密码" required name="password">
							<uni-easyinput placeholder="请输入密码" v-model="loginData.password" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<button @click="login">登录</button>
			</view>

			<!-- 注册面板 -->
			<view v-if="current === 1">
				<view>
					<uni-forms ref="baseForm">
						<uni-forms-item label="账号" required name="username">
							<uni-easyinput placeholder="请输入账号" v-model="registerData.username" />
						</uni-forms-item>
						<uni-forms-item label="密码" required name="password">
							<uni-easyinput placeholder="请输入密码" v-model="registerData.password" />
						</uni-forms-item>

						<uni-forms-item label="手机号" required name="phoneNumber">
							<uni-easyinput placeholder="请输入手机号码" v-model="registerData.phoneNumber" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<button @click="register">注册</button>
			</view>
		</view>
		<!-- 跳转首页 -->
		<view style="text-align: center; font-weight: bold; " @click="goUrl('../index/index')">
			<text>返回首页</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// tab按钮名称
				items: ['登录', '注册'],
				// tab按钮未激活颜色
				inActiveColor: "#fff",
				// 默认激活页面索引
				current: 0,
				// tab按钮激活颜色
				activeColor: '#00c273',
				// 按钮默认样式
				styleType: 'button',
				//登录数据
				loginData: {
					username: '',
					password: ''
				},
				//注册数据
				registerData: {
					username: '',
					password: '',
					phoneNumber: ''
				}
			}
		},
		methods: {
			// 切换面板
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 登录
			async login() {
				await uni.request({
					url: "https://apifoxmock.com/m1/5460619-0-default/login",
					method: 'POST',
					data: {
						username: this.loginData.username,
						password: this.loginData.password
					},
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						// console.log(res);
						if (res.data.statusCode === 200) {
							// 将正确登录的用户信息存入本地缓存
							const loginSuccessUser = res.data.data.user;
							uni.setStorageSync('userData', loginSuccessUser);

							uni.showToast({
								title: '登录成功',
								success: () => {
									uni.switchTab({
										url: "/pages/my/my" //跳转到个人中心
									})
								}
							});
						} else if (res.data.statusCode === 401) {
							uni.showToast({
								title: "用户不存在",
								icon: 'error'
							})
						} else if (res.data.statusCode === 402) {
							uni.showToast({
								title: "密码错误",
								icon: 'error'
							})
						}
					}
				});
			},
			// 注册
			async register() {
				const response = await uni.request({
					url: "https://apifoxmock.com/m1/5460619-0-default/register",
					method: 'POST',
					data: {
						username: this.registerData.username,
						password: this.registerData.password,
						phoneNumber: this.registerData.phoneNumber
					},
					header: {
						'Content-Type': 'application/json'
					},
					success: (res) => {
						// console.log(res);
						if (res.data.statusCode === 200) {
							uni.showToast({
								title: res.data.message,
								success: () => {
									this.current = 0;
								}
							});
						} else if (res.data.statusCode === 400) {
							uni.showToast({
								title: res.data.message
							})
						} else if (res.data.statusCode === 401) {
							uni.showToast({
								title: res.data.message
							})
						} else {
							uni.showToast({
								title: "注册失败"
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							title: "注册失败，网络错误",
							icon: "error"
						})
					}
				});
			},
			// 跳转首页
			goUrl(url) {

				uni.switchTab({
					url: url
				})
			}
		},
	}
</script>

<style lang="scss">
	// 背景图
	.header-image {

		width: 100%;
		height: 28vh;
		border-radius: 0 0 50% 50%;
	}

	// 分段器和面板
	.tab,
	.content {
		margin: 100rpx 100rpx 10rpx 100rpx;

		// 按钮
		button {
			margin-top: 50rpx;
			background-color: #00c273;
			color: #fff;
		}
	}
</style>
